<template>
    <div class="main">
        <!--<el-breadcrumb separator-class="el-icon-arrow-right">-->
            <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
            <!--<el-breadcrumb-item>数据管理</el-breadcrumb-item>-->
        <!--</el-breadcrumb>-->

        <!--<br/>-->

        <!--<lar-ui-plane v-if="model">-->
        <!--<lar-chart-line  :model="model">-->

        <!--</lar-chart-line>-->
        <!--</lar-ui-plane>-->


        <!--<lar-ui-tab v-if="model">-->
        <!--<lar-table :model="model" :canAdd="canAdd"></lar-table>-->
        <!--</lar-ui-tab>-->

        <lar-ui-plane>
            <lar-table :model="model" :canAdd="canAdd"></lar-table>
        </lar-ui-plane>

        <el-dialog
            custom-class="dialog"
            :title="dialogTitle"
            :width="dialogWidth"
            :before-close="dialogConfirmClose"
            top="7vh"
            :visible.sync="dialogVisible">
                <router-view name="dialog" @title="setDialogTitle" @change="dialogClose" @back="dialogClose"></router-view>
        </el-dialog>

    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data() {
            return {
                model: '',
                test: '测试',
                tableTitle: '数据管理',
                dialogConfirmCancel: false,//锁定后,关闭要弹出确认
                dialogVisible: false,
                dialogTitle: '',
                dialogWidth: '40%',
                canAdd: true,
                temp: "",
                template: function () {
                    return null
                }
            }
        },
        render(h) {
            return h('div', [this.template()]);
        },
        beforeRouteUpdate(to, from, next) {
            this.model = to.params.model;
            if (to.matched.some(record => record.meta.dialog)) {
//                ale
//                console.log(to);
                this.dialogVisible = true;
                //如果是弹出,model应该是读取之前旧的
                this.model = from.params.model;
            }
            next();
        },
//        beforeRouteLeave (to, from, next) {
//            // 导航离开该组件的对应路由时调用
//            // 可以访问组件实例 `this`
////            router.replace(location, onComplete?, onAbort?)
//        },

        watch: {
//            '$route' (to, from) {
//                alert(2);
//            }
        },
        computed: {
            // dataChange: function () {
//                return this.$store.state.dataRefreshEvents[this.model];
//             },
        },
        mounted() {
            this.model = this.$route.params.model;
            // this.getComponent();
            this.setBodyWidth();
            window.onresize = () => {
                this.setBodyWidth();
            };
        },
        methods: {
            //用于获取服务器模块,暂时未启用
            getComponent() {
                if (!this.model)
                    return '';
                this.loading = true;
                this.$http.get('/system/component/' + this.model + '/base.table', {ttl: 3600})
                    .then((response) => {
                        this.loading = false;
                        if (response.data.status == 1) {
                            this.renderHtml(response.data.data.html);
                        } else {
                            this.$message.error('Table返回结构异常');
                        }
                    })
                    .catch((error) => {
                        this.loading = false;
                        this.$message.error('请求异常,Table模块错误');
                        console.log('请求异常', error);
                    });
            },
            //渲染模板,用服务器的模板
            renderHtml(html) {
                let result = Vue.compile(html);
                this.template = result.render;
            },
            setBodyWidth: function () {
                let bodyWidth = document.documentElement.clientWidth;
                if (bodyWidth > 1440)
                    this.dialogWidth = '1000px';
                else if (bodyWidth > 1024)
                    this.dialogWidth = '800px';
                else if (bodyWidth > 850)
                    this.dialogWidth = '700px';
                else if (bodyWidth > 768)
                    this.dialogWidth = '75%';
                else
                    this.dialogWidth = '95%';
            },
            dialogConfirmClose: function (done) {
                if (this.dialogConfirmCancel) {
                    this.$confirm('是否放弃编辑内容？')
                        .then(() => {
                            this.$router.go(-1);
                            done();
                        }).catch(() => {
                    });
                } else {
                    this.$router.go(-1);
                    done();
                }
            },
            dialogClose: function () {
                this.dialogVisible = false;
                this.$router.go(-1);
            },
            setDialogTitle: function (title) {
                this.dialogTitle = title;
            }

        }
    }
</script>
<style scoped>
    .main {
        /*background: url(http://static.pctowap.com/dowap2/1.19-072201/img/bg.jpg) repeat-x;*/
        padding: 0px 0px 20px;
        /*margin-left: 220px;*/
    }
</style>
